<template>
   <div class="staff-info-page">
	   <!-- 公共组件-每个页面必须引入 -->
	   <public-module></public-module>
	   <u--form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="100" errorType="toast">
		   <div style="padding:0 24rpx;background: #fff;">
			   <u-form-item  label="姓名" prop="userRealname" borderBottom required>
					<u--input  fontSize="14" inputAlign="right" v-model="form.userRealname" border="none"  placeholder="请输入员工姓名"></u--input>
			   </u-form-item>
			   <u-form-item  label="手机号" >
				   <u--input  fontSize="14" inputAlign="right" v-model="form.mobile" border="none"  placeholder="请输入员工手机号"></u--input>
				   <!-- <div style="text-align: right;">{{form.mobile}}</div> -->
			   </u-form-item>
		   </div>
			<div class="form-title">权限设置</div>
			 <div style="padding:0 24rpx;background: #fff">
				<u-form-item label="部门"  borderBottom @click="toUrl('/pagesUser/business/depaList?type=select')">
					<u--input fontSize="14" inputAlign="right" :value="form.departmentName" disabled disabledColor="none" placeholder="请选择所在部门" border="none" style="pointer-events: none"></u--input>
					<div slot="right" class="form-icon">
						<u-icon slot="right" name="arrow-right" ></u-icon>
					</div>
				</u-form-item>
				<u-form-item  label="角色权限"  @click="toUrl('/pagesUser/business/roleList?type=select')">
					<u--input fontSize="14" inputAlign="right" :value="form.roleName" disabled disabledColor="none" placeholder="请选择角色" border="none" style="pointer-events: none"></u--input>
					<div slot="right" class="form-icon">
						<u-icon slot="right" name="arrow-right" ></u-icon>
					</div>
				</u-form-item>
			</div>
			<div class="form-title">商品设置</div>
			 <div style="padding:0 24rpx;background: #fff">
				<u-form-item  label="负责产品"  v-if="form.issuper">
				    <div style="font-size:28rpx;text-align: right;" class="categoryName">全部</div>  
				</u-form-item>	
				<u-form-item  label="负责产品"  @click="toUrl('/pagesUser/business/categoryList?type=select')" v-else>
				    <div style="font-size:28rpx;text-align: right;" class="categoryName">{{categoryName}}</div>  
					<div slot="right" class="form-icon">
						<u-icon slot="right" name="arrow-right" ></u-icon>
					</div>
				</u-form-item>	
			</div>
	   </u--form>
	   
	  <view class="page-bottom-btn" :style="{paddingBottom:systemInfo.tabbarPaddingB+'px',paddingLeft:'20rpx',paddingRight:'20rpx'}">
		 <u-button text="提 交" type="primary" shape="circle" @click="saveForm" :loading="btnLoading"></u-button>
	  </view>
   </div>
</template>
<script>

  import base from '@/config/baseUrl.js';
import {editUser,userDetail} from '@/config/api.js'
import store from '@/store';
const defaultForm={
  	    userId:'',
		userRealname:'',
		mobile:'',
		roleId:'',
		roleName:'',
		departmentId:'',
		departmentName:'',
		goodsClassIds:'',
		relationId:'',
      };
export default {
    computed: {
    	
		
    },
	data() {
		return {
           
		   form:JSON.parse(JSON.stringify(defaultForm)),
		  
		   rules:{
		   	userRealname: [{
		   			required: true,
		   			message: '请输入员工姓名',
		   			// 可以单个或者同时写两个触发验证方式
		   			trigger: ['blur', 'change']
		   		}],
		   },
		   btnLoading:false,
		   categoryName:'',
		   systemInfo: base.systemInfo,
		}
	},
    onShow() {
    	//选择部门页过来
        uni.getStorage({
            key:'selectDepa',
            success: (e) => {
				console.log("e",e)
				this.form.departmentId = e.data.departmentId;
				this.form.departmentName = e.data.departmentName;
                uni.removeStorage({
                    key:'selectDepa'
                })
            }
        })
    	
    	//选择角色页
    	uni.getStorage({
    	    key:'selectRole',
    	    success: (e) => {
				this.form.roleId = e.data.roleId;
				this.form.roleName = e.data.roleName;
    	        uni.removeStorage({
    	            key:'selectRole'
    	        })
    	    }
    	})
		
		//选择商品页
		uni.getStorage({
		    key:'selectCategory',
		    success: (e) => {
				this.form.goods = e.data;
				let categoryName = [] ;
				this.form.goods.forEach((el)=>{
					categoryName.push(el.firstName+'/'+el.categoryName)
				})
				this.categoryName = categoryName.join(",")
		        uni.removeStorage({
		            key:'selectCategory'
		        })
		    }
		})
    },
	 onLoad(options) {
		 this.form = JSON.parse(JSON.stringify(defaultForm));
		 this.categoryName = ''
		 userDetail({userId:options.id}).then((res)=>{
			 this.form = res;
			 let categoryName = [];
			 this.form.goods.forEach((el)=>{
				 categoryName.push(el.firstName + '/'+el.categoryName)
			 })
			 this.categoryName = categoryName.join(",")
		 })
		 
	 },
	methods: {
		
		toUrl(url){
			if(url.indexOf('categoryList') != -1){
				uni.setStorage({
				  key: 'infoCateList',
				  data: this.form.goods,
				  success() {
				   uni.navigateTo({
				     url: url
				   })
				  }
				})
			}else{
				uni.navigateTo({
				  url: url
				})
			}
			
		},
		
		
		saveForm(){
			this.$refs.form.validate().then(res => {
			   this.btnLoading = true;
			   let  data = {};
			   data.userId = this.form.userId;
			   data.userRealname = this.form.userRealname;
			   data.mobile = this.form.mobile;
			   data.roles = this.form.roleId;
			   data.departmentId = this.form.departmentId;
			   data.goodsClassIds = [];
			   data.relationId = this.form.relationId
			   this.form.goods.forEach((el)=>{
				   data.goodsClassIds.push(el.categoryId)
			   })
			   
				 editUser(data).then((res)=>{
					   this.btnLoading = false;
					   uni.setStorage({
					     key: 'saveStaff',
					     data: {
					       id: this.id
					     }
					   })
					   uni.$u.toast("提交成功");
					   uni.navigateBack();
				 }).catch(()=>{
					   this.btnLoading = false;
				 })
			}).catch(errors => {
				
			})
			
		},
	   
          
	}
};
</script>

<style lang="scss">
 @import '@/style/common.scss'; 
 .staff-info-page{
	 .form-title{
		 font-size:$m-font;
		 color:#929292;
		 padding:24rpx;
	 }
	 .categoryName{
		 @include textoverflow(1)
	 }
 }
</style>